<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
        <script type="text/javascript">
        	//动态rem 布局
        	// function setSize(){
        	// 	var deviceWidth = document.documentElement.clientWidth > 750 ? 750 : document.documentElement.clientWidth;
        	// 	document.documentElement.style.fontSize = deviceWidth / 7.5+ 'px';
        	// }
        	// window.onresize = setSize;
        	// setSize();

        	//淘宝布局解决方案
        	// var scale = 1 / devicePixelRatio;
        	// document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        	// document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
        </script>
        <style type="text/css">
        	*{
        		margin:0;
        		padding:0;
        		font-style: normal;
        		font-weight:normal;
        	}
        	body{
        		width:10rem;
        	}
        	input[type='text']{
        		width:1.25rem;
        	}
        </style>
    </head>
    <body>
    	<input type = "text" />
        <div id="outer" style="background:#099;margin-top:50px">
                click outer
                <p id="inner" style="background:#9C0">click inner</p>
        </div>

            <script type="text/javascript">
            function G(id){
                return document.getElementById(id);
            }
            function addEvent(obj, ev, handler){
                if(window.attachEvent){
                    obj.attachEvent("on" + ev, handler);
                }else if(window.addEventListener){
                    obj.addEventListener(ev, handler, true);
                }
            }
            function test(e){
                e.stopPropagation();
                console.log("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);
            }
            var outer = G("outer");
            var inner = G("inner");
            var body = document.body
            //addEvent(inner, "click", test);
            addEvent(body, "click", test);
            </script>
    </body>
</html>
